\section{文本样式属性} % (fold)
\label{sec:文本样式属性}

使用CSS可以修改文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等，页面大部分内容都是以文字的形式出现，因此，文本的相关样式表的属性和值需要熟练掌握。

\subsection{设定字体} % (fold)
\label{sub:设定字体}
通常情况下，中文页面的字体为宋体字，但新闻标题的字体会指定为更加醒目的黑体字或其他字体。在CSS中通过font-family属性来实现字体的指定，其中字体名称应该用单引号或者双引号包围起来。如：

\begin{lstlisting}
h1 {
	font-family: "黑体";
}
\end{lstlisting}

虽然在语法上我们可以指定任何字体，但是在用户浏览时，只会看到他们的系统中已经安装的字体，没有安装的字体会被系统默认的字体代替，在中文系统中，默认的字体为宋体字，常见的字体还有黑体、楷体、仿宋。有时为了兼顾各种设备，我们需要为文字指定不止一种字体，这些字体在不同的设备中名称可能不同。如下：

\begin{lstlisting}
body {
	font-family: "宋体","sans-serif";
}
\end{lstlisting}

浏览器会首先使用宋体来显示文本，当系统中没有安装宋体字时，才会使用替代字体sans-serif。替代字体可以有多个，分别用逗号隔开。
% subsubsection 设定字体 (end)

\subsection{创建斜体} % (fold)
\label{sub:创建斜体}
斜体常常用来表示引述、人名、外语单词等内容的表示。斜体效果使用font-style属性来控制，font-style有3个值：italic、oblique、normal，分别表示使用字体的倾斜版本来显示字体、使用计算机动态倾斜文字以及按正常字体显示。如：

\begin{lstlisting}
em {
	font-style: italic;
}
\end{lstlisting}
% subsection 创建斜体 (end)

\subsection{应用粗体} % (fold)
\label{sub:应用粗体}
在页面中，加粗的显示效果比较常见，是常规的、有效的强调内容的手段。

使用样式表的font-weight属性可以灵活地控制字体的粗细，如：

\begin{lstlisting}
em {
	font-weight: bold;
}
\end{lstlisting}

font-weight的只有两种表示方法，一种是从100-900之间的100的倍数；一种是lighter、normal、bold以及bolder。
% subsection 应用粗体 (end)应用粗体

\subsection{设置字体大小} % (fold)
\label{sub:设置字体大小}
在CSS中，使用font-size属性为字体指定大小，例如：

\begin{lstlisting}
p {
	font-size: 10px;
}
body {
	font-size: 62.5%;
}
\end{lstlisting}

通常情况下，浏览器的默认字体大小为16px，而16px的62.5\%恰好也为10px。
% subsection 设置字体大小 (end)

\subsection{设置行间距} % (fold)
\label{sub:设置行间距}
为了增强文字的易读性，我们通常要调整段落中的文字行间距，使用比较大的行间距能够提高文字的可识别性。对于一些不重要的信息，我们可以缩小行间距，使之显得更加紧凑。在CSS中，使用line-height属性来控制行间距的大小，它的值除了可以采用相对单位、绝对单位和百分比之外，还可以是没有单位的数字。例如：
p {
	font-size：16px；
	line-height: 1.75;
}
上例中段落中文字的行间距最终等于28（16*1.75）像素。
% subsection 设置行间距 (end)六、设置行间距

\subsection{同时设置所有字体值} % (fold)
\label{sub:同时设置所有字体值}
除了能够使用font-family、font-size、line-height、font-weight分别设置字体字型、字体大小、行间距和粗细外，CSS还提供了font属性用以快速设置字体属性。font属性的设定非常灵活，可以是上述几种属性的自由组合，但字体大小的属性值出现在设置字体系列的前面，如果有行间距的话，行间距必须直接出现在字体大小后面，用斜杠连接。如：

\begin{lstlisting}
p {
	font: bold 16px/1.75 “宋体”;
}
\end{lstlisting}

上述规则设定段落元素的字体加粗、字体大小为16像素，行间距为28（16*1.75）像素，采用宋体字型。再如：

\begin{lstlisting}
p {
	font: 16px “宋体” ;
}
\end{lstlisting}

上述规格规定段落元素采用宋体字型、字体大小为16px，其他属性为normal。
% subsection 同时设置所有字体值 (end)
\subsection{设置字体颜色} % (fold)
\label{sub:设置字体颜色}
在CSS中，可通过color属性为元素指定字体颜色。如：

\begin{lstlisting}
p {
	color: black;
}
\end{lstlisting}

\subsection{控制字符间距} % (fold)
\label{sub:控制字符间距}
通常情况下，中文字符的字间距不用做额外的调整，但有时由于版面空间有限，需要将较长的标题安排在某个固定的空间内，在不删除字数的情况下，我们可以利用CSS提供的letter-spacing属性来增加或缩小中文字符之间的间距。letter-spacing的值是带单位的数字。如：

\begin{lstlisting}
h2 {
letter-spacing: -2px;
}
\end{lstlisting}

上述规则将使二级标题中字符之间的距离在原有基础上缩小2个像素。
和letter-spacing相关联的另外一个属性是word-spacing，word-spacing用来调整单词之间的距离，由于汉字中的单个汉字被认定为字母，因此word-spacing在中文网页中的应用非常少。
% subsection 控制字符间距 (end)九、控制字间距

\subsection{首行缩进} % (fold)
\label{sub:首行缩进}
CSS使用text-indent属性来控制文本的首行缩进。text-indent的值必须是有单位的数值，如2em或18px等。如果数值为正，则是首行缩进，如果数值为负，则是悬挂缩进。大多数情况下，新闻的正文内容中的段落都要求首行缩进两个字符，则可以这样设置规则：

\begin{lstlisting}
p {
    text-indent: 2em;
}
\end{lstlisting}
% subsection 首行缩进 (end)
\subsection{文本对齐} % (fold)
\label{sub:文本对齐}
CSS中使用text-align来控制文本的对齐方式。text-align的取值可以是left、right、center、justify，分别对应左对齐、右对齐、居中以及两端对齐。如：
p {
    text-align: left;
}
表示左对齐段落中的文字。
% subsection 文本对齐 (end)

\subsection{文本装饰} % (fold)
\label{sub:文本装饰}
CSS还提供了对文本进行简单装饰的属性text-decoration。该属性的只有5个：underline、overline、line-through、blink、none，分别表示下划线、上划线、删除线、闪烁*以及取消装饰效果。例如：

\begin{lstlisting}
a:hover {
    text-decoration: underline;
}
\end{lstlisting}
上述样式的效果是当鼠标滑过或停留在超级链接上时，超级链接中的文字出现下划线。
% subsection 文本装饰 (end)

除了以上装饰效果外，CSS3还可以通过text-shadow属性为文字添加阴影。在以前，阴影效果一般都是通过图片实现，现在直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。语法如下：

\begin{lstlisting}
text-shadow:[Color X-Offset Y-Offset Blur],[Color X-Offset Y-Offset Blur]...
或者
text-shadow:[X-Offset Y-Offset Blur Color],[X-Offset Y-Offset Blur Color]...
\end{lstlisting}

X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。例如：

\begin{lstlisting}
.demo1 {
   text-shadow: red 0 1px 0;
}
\end{lstlisting}

text-shadow可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。例如：

\begin{lstlisting}
.demo3 {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
\end{lstlisting}

\subsection{其他文本样式} % (fold)
\label{sub:其他文本样式}
文本除了上述属性外，还有些中文环境下不大常用的属性，如white-sapce、text-transform、word-spacing、font-variant。感兴趣的读者可自行查找参考资料学习。
% subsection 其他文本样式 (end)
